<template>
	<view class="wapper">
		<view class="top-content">
			<view class="title">
				{{state.obj.title}}
			</view>
			<view class="info ss-flex">
				<view class="ll">
					浏览：{{state.obj.pv}}人
				</view>
				<view class="time ss-flex">
					<u-icon name="clock" size="22rpx" color="#999"></u-icon> 发布时间：{{state.obj.createtime}}
				</view>
				<image :src="state.obj.is_collect?`/static/stared.png`:`/static/star.png`" mode="" class="star"
					@tap="collect"></image>
			</view>

		</view>
		<view class="js">

		</view>
		<view class="info" style="width: 100%;">
				<u-parse :content="state.obj.content" :selectable="true"></u-parse>
		</view>
<globalPassWord ref="ts"></globalPassWord>
		<button class="submit" @tap="submit"  v-if="!state.obj.is_pay">查看本期预测{{state.obj.price}}金币</button>
		<globalModel tip="当前需扣除的金币不足，请点击前往充值" ref="model" @confirm="()=>{LC.$router.go('/pages/user/rechange')}"></globalModel>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import LC from '../../LC';
	import {
		onLoad,
		onReady,
		onReachBottom,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	let state = reactive({
		id: 0,
		obj: {},
	})
	onLoad(({
		id
	}) => {


		state.id = id

		init()
	})
	let ts=ref(null)
	onNavigationBarButtonTap((a)=>{
		ts.value.open()
	})
let info = computed(() => LC.$store('user').info)
	function init() {


		LC.$api.home.articleshow({
				id: state.id
			})
			.then((res) => {
				if (res.code === 1) {
					state.obj = res.data
				}
			})

	}

	function collect() {


		LC.$api.home.articlecollect({
				id: state.id
			})
			.then((res) => {
				if (res.code === 1) {
					state.obj.is_collect = !state.obj.is_collect
				}
			})

	}
	let model = ref(null)

	function submit() {
		console.log(state.obj.price * 1 ,info.value.money * 1)
		if (state.obj.price * 1 > info.value.money * 1) {
			model.value.open()
			return
		}

		LC.$api.home.articlepay({
				id: state.id
			})
			.then((res) => {
				if (res.code === 1) {
					uni.$u.toast('支付成功')
					init()
				}
			})

	}
</script>

<style lang="scss">
	.wapper {
		padding: 20rpx 30rpx;
	}

	.js {
		margin: 0 30rpx;
		position: relative;
		min-height: 26rpx;
	}

	.submit {
		margin: 36rpx 30rpx;

		height: 98rpx !important;
		background: #FC5652 !important;
		border-radius: 50rpx !important;
		font-size: 30rpx !important;
		font-weight: 400;
		color: #fff !important;
		line-height: 95rpx !important;
		letter-spacing: 3px;
	}

	.top-content {
		.title {
			width: 100%;
			font-size: 36rpx;
			font-weight: 600;
			color: #000;
		}

		.info {
			margin-top: 20rpx;
			user-select: text;

			.ll {
				background-color: #FFF2E2;
				border-radius:16rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #FE9519;
				height: 36rpx;
				padding: 0 20rpx;
			}

			.time {
				margin-left: 30rpx;
				width: 60%;
				font-size: 22rpx;
				font-weight: 400;
				color: #999;
			}

			.star {
				margin-left: auto;
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
</style>